"use client"
import React, { useState, useEffect } from 'react';
import { Space, Table, Button, Modal, Form, Input, Select, Popconfirm, Tag } from 'antd';
import type { TableProps, FormProps } from 'antd';
import { getShoplist, delShoplist, searchShoplist } from '@/api/http';
import Page from "../xyn2/page"

interface DataType {
  id: number,
  title: string,
  author: string,
  qi: string,
  money: string,
  time: string,
  state: boolean
}

export default function page() {
  const columns: TableProps<DataType>['columns'] = [
    {
      title: '编号',
      dataIndex: 'id'
    }, {
      title: '标题',
      dataIndex: 'title'
    }, {
      title: '作者',
      dataIndex: 'author'
    }, {
      title: '期数',
      dataIndex: 'qi'
    }, {
      title: '金额',
      dataIndex: 'money'
    }, {
      title: '时间',
      dataIndex: 'time'
    }, {
      title: '状态',
      dataIndex: 'state',
      render: (checked) => {
        return <Tag color={checked ? "green" : "red"}>{checked ? "已发布" : "未发布"}</Tag>
      }
    }, {
      title: "操作",
      dataIndex: "action",
      render: (_, item) => {
        return <Space>
          <a onClick={() => {
            showModal()
            setTitle("编辑")
            setItem(item)
          }}>编辑</a>
          <Popconfirm
            title="删除数据"
            description="你确定要删除数据吗"
            onConfirm={() => {
              delShoplist(item.id)
              shuju()
            }}

            okText="Yes"
            cancelText="No"
          >
            <a>删除</a>
          </Popconfirm>
        </Space>
      }
    }
  ];

  const [table, setTable] = useState([])

  async function shuju() {
    let res = await getShoplist()
    setTable(res as any)
  }

  useEffect(() => {
    shuju()
  }, [])

  const [title, setTitle] = useState("")
  const [itemobj, setItem] = useState({})
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onFinish: FormProps<DataType>['onFinish'] = async (values: any) => {
    let res = await searchShoplist(values.title, values.author, values.qi, values.money, values.time, values.state)
    setTable(res as any)
  };


  return (
    <div>

      <Form


        onFinish={onFinish}
        style={{
          display: "flex"
        }}
      >
        <Form.Item label="订单标题" name="title">
          <Input />
        </Form.Item>
        <Form.Item label="作者" name="author" >
          <Input />
        </Form.Item>
        {/* 进行非空校验，校验通过后才能提交给服务器 */}
        <Form.Item label="期数" name="qi" style={{ width: "200px" }}>
          <Select>
            <Select.Option value="第一期">第一期</Select.Option>
            <Select.Option value="第二期">第二期</Select.Option>
            <Select.Option value="第三期">第三期</Select.Option>
            <Select.Option value="第四期">第四期</Select.Option>
            <Select.Option value="第五期">第五期</Select.Option>
            <Select.Option value="第六期">第六期</Select.Option>
            <Select.Option value="第七期">第七期</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="钱数" name="money" >
          <Input />
        </Form.Item>
        {/* 进行非空校验，校验通过后才能提交给服务器 */}
        <Form.Item label="时间" name="time" >
          <Input />
        </Form.Item>

        <Form.Item label="状态" name="state" style={{ width: "200px" }}>
          <Select>
            <Select.Option value={true}>已发布</Select.Option>
            <Select.Option value={false}>未发布</Select.Option>
          </Select>
        </Form.Item>


        <Form.Item>
          <Button htmlType='submit'>搜索</Button>
        </Form.Item>
      </Form>
      <Button type="primary" onClick={() => {
        showModal()
        setTitle("添加")
        setItem({})
      }}>
        添加
      </Button>
      <Modal title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} destroyOnClose footer={null}>
      {
        isModalOpen ? <Page title={title} itemobj={itemobj} onOk={handleOk} onCancel={handleCancel} shuju={shuju}/> : null
      }
      </Modal>
      <Table<DataType> pagination={{ defaultPageSize: 5, showSizeChanger: true, pageSizeOptions: [1, 3, 5], position: ["bottomRight"] }} columns={columns} dataSource={table} rowKey={'id'} /></div>
  )
}
